<template>
  <div class="layout-container">
    <el-container>
      <el-aside width="200px">
        <div class="logo">
          <span>唯品会后台</span>
        </div>
        <el-menu
          router
          :default-active="$route.path"
          class="el-menu-vertical"
          text-color="#bfcbd9"
          active-text-color="#409EFF"
        >
          <el-menu-item index="/dashboard">
            <el-icon><PieChart /></el-icon>
            <span>仪表盘</span>
          </el-menu-item>
          <el-sub-menu index="system">
            <template #title>
              <el-icon><Setting /></el-icon>
              <span>系统管理</span>
            </template>
            <el-menu-item index="/user">
              <el-icon><User /></el-icon>
              <span>用户管理</span>
            </el-menu-item>
          </el-sub-menu>
          <el-sub-menu index="goods">
            <template #title>
              <el-icon><Goods /></el-icon>
              <span>商品管理</span>
            </template>
            <el-menu-item index="/goods">
              <el-icon><List /></el-icon>
              <span>商品列表</span>
            </el-menu-item>
            <el-menu-item index="/comment">
              <el-icon><ChatDotRound /></el-icon>
              <span>评论管理</span>
            </el-menu-item>
          </el-sub-menu>
          <el-sub-menu index="store">
            <template #title>
              <el-icon><Shop /></el-icon>
              <span>店铺管理</span>
            </template>
            <el-menu-item index="/store">
              <el-icon><Shop /></el-icon>
              <span>店铺列表</span>
            </el-menu-item>
          </el-sub-menu>
          <el-sub-menu index="swiper">
            <template #title>
              <el-icon><Picture /></el-icon>
              <span>轮播图管理</span>
            </template>
            <el-menu-item index="/swiper">
              <el-icon><PictureFilled /></el-icon>
              <span>轮播图列表</span>
            </el-menu-item>
          </el-sub-menu>
          <el-sub-menu index="order">
            <template #title>
              <el-icon><List /></el-icon>
              <span>订单管理</span>
            </template>
            <el-menu-item index="/order">
              <el-icon><Tickets /></el-icon>
              <span>订单列表</span>
            </el-menu-item>
          </el-sub-menu>
          <el-sub-menu index="address">
            <template #title>
              <el-icon><Location /></el-icon>
              <span>地址管理</span>
            </template>
            <el-menu-item index="/address">
              <el-icon><MapLocation /></el-icon>
              <span>地址列表</span>
            </el-menu-item>
          </el-sub-menu>
        </el-menu>
      </el-aside>

      <el-container>
        <el-header>
          <div class="header-left">
            <el-icon @click="toggleCollapse"><Fold /></el-icon>
            <el-breadcrumb separator="/">
              <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
              <el-breadcrumb-item>{{ $route.meta.title }}</el-breadcrumb-item>
            </el-breadcrumb>
          </div>
         
        </el-header>

        <el-main>
          <router-view v-slot="{ Component }">
            <transition name="fade-transform" mode="out-in">
              <component :is="Component" />
            </transition>
          </router-view>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script setup>
import { useAuthStore } from "../stores/auth";
import { useRouter } from "vue-router";
import { ElMessageBox } from "element-plus";
import {
  Location,
  MapLocation,
  List,
  Tickets,
  Goods,
  ShoppingCart,
  User,
  Setting,
  Picture,
  PictureFilled,
  HomeFilled,
  Shop,
  PieChart,
  Fold,
  ArrowDown,
  ChatDotRound,
} from "@element-plus/icons-vue";

const authStore = useAuthStore();
const router = useRouter();

const toggleCollapse = () => {
  // 后续添加侧边栏折叠功能
};

const handleLogout = () => {
  ElMessageBox.confirm("确定要退出登录吗？", "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  }).then(() => {
    authStore.logout();
    router.push("/login");
  });
};
</script>

<style scoped>
.layout-container {
  height: 100vh;
  background-color: #f8f9fa;
}

.logo {
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #2c3e50;
  font-size: 18px;
  font-weight: bold;
  background-color: #fff;
  border-bottom: 1px solid #edf2f7;
  letter-spacing: 1px;
}

.el-menu-vertical {
  height: calc(100vh - 60px);
  border-right: none;
  background-color: #fff;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.03);
}

.el-menu-vertical :deep(.el-menu-item),
.el-menu-vertical :deep(.el-sub-menu__title) {
  color: #4a5568;
  font-weight: 500;
  transition: all 0.2s ease;
}

.el-menu-vertical :deep(.el-menu-item:hover),
.el-menu-vertical :deep(.el-sub-menu__title:hover) {
  color: #2d3748;
  background-color: #f7fafc !important;
}

.el-menu-vertical :deep(.el-menu-item.is-active) {
  color: #3182ce !important;
  background-color: #ebf8ff !important;
  border-right: 2px solid #3182ce;
}

.el-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 24px;
  background-color: #fff;
  border-bottom: 1px solid #edf2f7;
  height: 60px;
}

.header-left {
  display: flex;
  align-items: center;
  gap: 20px;
}

.header-left .el-icon {
  color: #4a5568;
  cursor: pointer;
  transition: transform 0.2s ease;
}

.header-left .el-icon:hover {
  transform: scale(1.1);
  color: #2d3748;
}

.header-right {
  display: flex;
  align-items: center;
  gap: 16px;
}

.el-dropdown-link {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  color: #4a5568;
  transition: all 0.2s ease;
  padding: 6px 12px;
  border-radius: 6px;
}

.el-dropdown-link:hover {
  background-color: #f7fafc;
  color: #2d3748;
}

/* 路由切换动画 */
.fade-transform-leave-active,
.fade-transform-enter-active {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.fade-transform-enter-from {
  opacity: 0;
  transform: translateY(10px);
}

.fade-transform-leave-to {
  opacity: 0;
  transform: translateY(-10px);
}

/* 面包屑导航样式 */
:deep(.el-breadcrumb__inner) {
  color: #4a5568 !important;
  transition: color 0.2s ease;
}

:deep(.el-breadcrumb__inner:hover) {
  color: #3182ce !important;
}

/* 滚动条美化 */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-thumb {
  background: #cbd5e0;
  border-radius: 3px;
}

::-webkit-scrollbar-track {
  background: #f8f9fa;
}
</style>

<style>
.el-menu{
  background-color: none !important;
}
</style>